<template>
  <h1>1.组件的基本写法</h1>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
</script>

<script lang="ts" setup>
import { ref } from "vue";

/* 
  注意:
    - reactive只能用来创建对象类型的响应式数据,不能创建基本类型的响应式数据

    - ref可以用来创建对象类型的响应式数据,他的value属性就是一个prox代理对象,模板中直接使用的还是这个代理对象,但是以后我们操作这个代理对象就要添加.value了

*/

const person = ref({
  name: "小王",
  age: 19,
});

console.log(person);
</script>

<style scoped></style>
